<template>
  <div ref="chartEl" style="height:100%"></div>
</template>
<script>
import echarts from 'echarts'

export default {
  data(){
    return {
      chart:null
    }
  },
  props:{
    option:{
      type:Object
    }
  },
  watch:{
    option:{
      //深度监视
      handler(newValue) {
        this.chart.setOption(newValue);
      },
      deep: true
    }
  },
  mounted(){
    this.chart = echarts.init(this.$refs.chartEl);
    this.chart.setOption(this.option);

    // 添加窗口改变监听
    const chart = this.chart
    this.chart.__resize = function(){
      chart.resize();
    };
    setTimeout(() => {
      window.addEventListener('resize',this.chart.__resize);
    }, 200);
  },
  beforeDestroy() {
    // 移除窗口改变监听
    window.removeEventListener('resize',this.chart.__resize);
  }
}
</script>
